<template>
  <div class="zs-table-page-container">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="queryParams.groupCode" filterable clearable class="zs-select-md zs-space-right-sm"
          placeholder="集团" @change="getProjectDownList">
          <el-option v-for="item in dictObj.DASH_TOTAL_CORP" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
        <el-select v-model="queryParams.projectCode" filterable clearable class="zs-select-md zs-space-right-sm"
          placeholder="项目名称">
          <el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName"
            :value="item.projectCode" />
        </el-select>
        <el-date-picker class="zs-space-right-sm" v-model="queryParams.yearMonth" type="month" placeholder="日期"
          :clearable="false" value-format="YYYY-MM" />
        <!-- :prefix-icon="DateBeforeIcon" -->
        <el-button class="zs-btn-plain" @click="search()">查询</el-button>
      </span>
      <span>
        <el-button class="zs-btn-plain" @click="handleDownload">
          <el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出
        </el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <hsTableV2 :loading="tableData.loading" isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" fixed
        :multistageHeaderData="multistageData" :rowClassFun="tableData.rowClass">
      </hsTableV2>
      <!-- <div class="zs-text-gray-dark zs-text-sm zs-space-top">*单位：万元</div> -->
    </div>
  </div>
</template>

<script setup lang="jsx">
import { downloadNewFile } from "@/utils/publicUtils"
import dbPublicApi from '@/api/dbPublic'
import { toThousands } from '@/utils/number-util'
import { businessAnalyzeReportProjectDownApi, businessAnalyzeReportApi, businessAnalyzeReportExportApi } from '@/api/SpecialReport/businessDuojing'
import { ref, reactive } from 'vue'
import { useStore } from "vuex"
let store = useStore()

let dictObj = store.getters.getDictObj(['DASH_TOTAL_CORP'])

let queryParams = reactive({
  groupCode: '',
  projectCode: '',
  yearMonth: '',
})

function queryList() {
  tableData.loading = true
  tableData.data = []
  businessAnalyzeReportApi({ projectCode: queryParams.projectCode, yearMonth: queryParams.yearMonth }).then(res => {
    let resData = res.data
    if (resData.code == 200) {
      if (resData.data && resData.data.length > 0) {
        resData.data.map(group => {
          group.dataList.map((item, index) => {
            index == 0 ? tableData.data.push({ isTitle: true, ...item }) : tableData.data.push(item)
          })
        })
      }
    }
    tableData.loading = false
  })
}

let multistageData = {}
const initMultistageData = (yearmonth) => {
  const year = yearmonth.split('-')[0]
  let month = yearmonth.split('-')[1]
  month[0] == 0 ? month = month.substring(1, 2) : ''
  multistageData['multCol1'] = {
    key: 'multCol1',
    title: `${year}年${month}月`,
    childrenIndex: [2, 3, 4, 5, 6]
  }
  multistageData['multCol2'] = {
    key: 'multCol2',
    title: `${year}年1-${month}月`,
    childrenIndex: [7, 8, 9, 10, 11]
  }
  multistageData['multCol3'] = {
    key: 'multCol3',
    title: `${year}年度`,
    childrenIndex: [12, 13, 14]
  }
}
const windowWidth = document.documentElement.scrollWidth;
let celWidth = (windowWidth - 138 - 200) / 14
celWidth = celWidth > 82 ? celWidth : 82
let tableData = reactive({
  loading: false,
  data: [],
  rowClass: ({ rowData }) => {
    let classArr = []
    if (rowData.isTitle) {
      classArr.push('row-project-title')
    } else {
      classArr.push('row-white')
    }
    return classArr.join(' ')
  },
  cloumns: [
    {
      key: "subjectName",
      dataKey: "subjectName",
      title: "资产类型",
      width: 200,
      align: "left",
      indentKey: 'subject_level',
      cellRenderer: ({ rowData }) => (
        rowData.subjectName
      )
    },
    {
      key: "rentOutRate",
      dataKey: "rentOutRate",
      title: "出租率",
      align: "right",
      width: celWidth,
      cellRenderer: ({ rowData }) => (
        <span class={rowData.rentOutColor == 1 ? 'zs-text-red' : rowData.rentOutColor == 2 ? 'zs-text-orange' : rowData.rentOutColor == 3 ? 'zs-text-green' : ''}>{rowData.rentOutRate == '-' ? '-' : toThousands(rowData.rentOutRate) + '%'}</span>
      )
    },
    // 当前月份
    {
      key: "monthBudget",
      dataKey: "monthBudget",
      title: "预算",
      align: "right",
      width: celWidth,
      parentKey: 'multCol1',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.monthBudget)
      )
    },
    {
      key: "monthActual",
      dataKey: "monthActual",
      title: "实际",
      align: "right",
      width: celWidth,
      parentKey: 'multCol1',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.monthActual)
      )
    },
    {
      key: "monthPc",
      dataKey: "monthPc",
      title: "完成率",
      align: "right",
      width: celWidth,
      parentKey: 'multCol1',
      cellRenderer: ({ rowData }) => (
        <span class={rowData.monthWclRed == 1 ? 'zs-text-red' : rowData.monthWclRed == 2 ? 'zs-text-orange' : rowData.monthWclRed == 3 ? 'zs-text-green' : ''}>{rowData.monthPc == '-' ? '-' : toThousands(rowData.monthPc) + '%'}</span>
      )
    },
    {
      key: "monthErlier",
      dataKey: "monthErlier",
      title: "同比",
      align: "right",
      width: celWidth,
      parentKey: 'multCol1',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.monthErlier)
      )
    },
    {
      key: "monthBreachValue",
      dataKey: "monthBreachValue",
      title: "缺口",
      align: "right",
      width: celWidth,
      parentKey: 'multCol1',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.monthBreachValue)
      )
    },
    // 1-当前月
    {
      key: "accMonthBudget",
      dataKey: "accMonthBudget",
      title: "预算",
      align: "right",
      width: celWidth,
      parentKey: 'multCol2',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.accMonthBudget)
      )
    },
    {
      key: "accMonthActual",
      dataKey: "accMonthActual",
      title: "实际",
      align: "right",
      width: celWidth,
      parentKey: 'multCol2',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.accMonthActual)
      )
    },
    {
      key: "accMonthPc",
      dataKey: "accMonthPc",
      title: "完成率",
      align: "right",
      width: celWidth,
      parentKey: 'multCol2',
      cellRenderer: ({ rowData }) => (
        <span class={rowData.accWclRed == 1 ? 'zs-text-red' : rowData.accWclRed == 2 ? 'zs-text-orange' : rowData.accWclRed == 3 ? 'zs-text-green' : ''}>{rowData.accMonthPc == '-' ? '-' : toThousands(rowData.accMonthPc) + '%'}</span>
      )
    },
    {
      key: "accMonthErlier",
      dataKey: "accMonthErlier",
      title: "同比",
      align: "right",
      width: celWidth,
      parentKey: 'multCol2',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.accMonthErlier)
      )
    },
    {
      key: "accMonthBreachValue",
      dataKey: "accMonthBreachValue",
      title: "缺口",
      align: "right",
      width: celWidth,
      parentKey: 'multCol2',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.accMonthBreachValue)
      )
    },
    // 本年度
    {
      key: "yearBudget",
      dataKey: "yearBudget",
      title: "预算",
      align: "right",
      width: celWidth,
      parentKey: 'multCol3',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.yearBudget)
      )
    },
    {
      key: "yearActual",
      dataKey: "yearActual",
      title: "实际",
      align: "right",
      width: celWidth,
      parentKey: 'multCol3',
      cellRenderer: ({ rowData }) => (
        toThousands(rowData.yearActual)
      )
    },
    {
      key: "yearPc",
      dataKey: "yearPc",
      title: "完成率",
      align: "right",
      width: celWidth,
      parentKey: 'multCol3',
      cellRenderer: ({ rowData }) => (
        // <span class={rowData.month_wcl_red == 1 ? 'zs-text-red' : rowData.month_wcl_red == 2 ? 'zs-text-orange' : rowData.month_wcl_red == 3 ? 'zs-text-green' : ''}>{rowData.monthBudget}</span>
        rowData.yearPc == '-' ? '-' : toThousands(rowData.yearPc) + '%'
      )
    },
  ],
})



const queryDataUpdateTime = async () => {
  await dbPublicApi.queryMonthsTimeApi().then(res => {
    let resData = res.data
    if (resData.code == 200) {
      queryParams.yearMonth = resData.data
    }
  })
}

let projectList = ref([])
function getProjectDownList() {
  queryParams.projectCode = ''
  projectList.value = []
  businessAnalyzeReportProjectDownApi(queryParams.groupCode).then(res => {
    let resData = res.data
    if (resData.code == 200) {
      projectList.value = resData.data
    }
  })
}

const search = () => {
  initMultistageData(queryParams.yearMonth)
  queryList()
}

const init = async () => {
  getProjectDownList()
  await queryDataUpdateTime()
  initMultistageData(queryParams.yearMonth)
  queryList()

}
init()


// 导出
async function handleDownload() {
  const fileName = `商业多经分析报表.xls`;
  let fileData = await businessAnalyzeReportExportApi({ projectCode: queryParams.projectCode, yearMonth: queryParams.yearMonth });
  downloadNewFile(fileData.data, fileName);
}

</script>

<style lang="scss" scoped>
:deep(.el-table-v2 .row-project-title) {
  border-top: 1px solid #b9bac0;
  background: #fbfbfb;
  font-weight: 600;
}

:deep(.el-table-v2 .row-white) {
  background: white;
}
</style>
